<template>
	<div class="popup-rp">
		<cl-popup direction="center" :force-update="false" :wrapper-closable="isDisabled" :visible.sync="show" @close="close">
			<div class="popup-rp--wait" v-if="!isTake">
				<img class="popup-rp__cover" src="@/assets/2/images/rp-open/wait.png" />

				<div
					:class="[
						'popup-rp__grab',
						`s-${animate}`,
						{
							'is-animate': animate == 1
						}
					]"
					@click="take"
				>
					<img class="d-1" src="@/assets/2/images/rp-open/a1.png" />
					<img class="d-2" src="@/assets/2/images/rp-open/a2.png" />
					<img class="d-3" src="@/assets/2/images/rp-open/a3.png" />
					<img class="d-4" src="@/assets/2/images/rp-open/a4.png" />
					<img class="d-5" src="@/assets/2/images/rp-open/a5.png" />
					<img class="d-6" src="@/assets/2/images/rp-open/a6.png" />
					<img class="d-7" src="@/assets/2/images/rp-open/a7.png" />
					<img class="d-8" src="@/assets/2/images/rp-open/a8.png" />
					<img class="d-9" src="@/assets/2/images/rp-open/a9.png" />
					<img class="d-10" src="@/assets/2/images/rp-open/a10.png" />
					<img class="d-11" src="@/assets/2/images/rp-open/a11.png" />
				</div>

				<!-- 小红包 -->
				<div class="popup-rp__small">
					<img class="d1" src="@/assets/2/images/rp-open/d1.png" />
					<img class="d2" src="@/assets/2/images/rp-open/d2.png" />
					<img class="d3" src="@/assets/2/images/rp-open/d3.png" />
					<img class="d4" src="@/assets/2/images/rp-open/d4.png" />
				</div>

				<div class="popup-rp__z">
					<span>{{ bwbt_conf.popText || '翼支付用户专享' }}</span>
				</div>
			</div>

			<div class="popup-rp--open" v-else>
				<img class="popup-rp__cover" src="@/assets/2/images/rp-open/open-new.png" />
				<img class="popup-rp__cover-bg" src="@/assets/2/images/rp-open/open-b.png" />

				<div class="popup-rp__light">
					<img src="@/assets/2/images/rp-open/light.png" />
				</div>

				<div class="popup-rp__price">
					<span>￥{{ amount || 0 }}</span>
				</div>

				<div class="popup-rp__date">
					<span>红包将在</span>
					<cl-countdown :splitor="[':', ':', ':']" :layout="['hour', 'minute', 'second']" :datetime="endTime" is-millisecond></cl-countdown>
					<span>后清零</span>
				</div>

				<button class="popup-rp__next" @click="close">
					<img src="@/assets/2/images/rp-open/use-btn2.png" />
					<span>拿去花</span>
				</button>
			</div>
		</cl-popup>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
import moment from 'moment';
import ClPopup from '@/components/popup';
import ClCountdown from '@/components/countdown';
import { Toast } from 'vant';
import _ from 'lodash';

export default {
	components: {
		ClPopup,
		ClCountdown
	},
	data() {
		return {
			amount: '',
			show: false,
			isTake: false,
			animate: 1,
			timer: null
		};
	},
	computed: {
		...mapGetters(['bwbt_userInfo', 'bwbt_conf']),

		isDisabled() {
			return this.bwbt_userInfo.subsidiesAmount != 0;
		},

		endTime() {
			return localStorage.getItem('countdown');
		}
	},
	watch: {
		'bwbt_userInfo.remainingReceiveNum': {
			immediate: true,
			handler(v) {
				if (v > 0 && this.bwbt_userInfo.numToday < this.bwbt_conf.againNum) {
					this.open();
				}
			}
		}
	},
	methods: {
		open() {
			this.show = true;
		},

		close() {
			this.show = false;
			this.stop();

			setTimeout(() => {
				this.isTake = false;
				this.amount = '';
				this.animate = 1;
			}, 300);
		},

		stop() {
			clearInterval(this.timer);
		},

		take: _.debounce(function() {
			if (this.animate == 1) {
				this.timer = setInterval(() => {
					this.animate += 1;

					if (this.animate == 11) {
						this.stop();

						this.$service.bwbt.winners
							.getSubsidiesAmount()
							.then(res => {
								this.isTake = true;
								this.amount = res.subsidiesAmount;
								this.$emit('take', this.amount);
								this.$store.dispatch('GET_BWBT_USERINFO');
							})
							.catch(err => {
								Toast(err.message);
								this.close();
							});
					}
				}, 100);
			}
		}, 300)
	}
};
</script>

<style lang="scss" scoped>
.popup-rp {
	/deep/.cl-popup {
		background-color: transparent;

		&__container {
			padding: 0;
		}
	}

	/deep/.cl-countdown {
		position: relative;
		top: 2px;

		&__number {
			background-color: transparent !important;
			margin: 0 !important;
			padding: 0;
			font-size: 22px;
			border-radius: 10px;
		}
	}

	&--open,
	&--wait {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	&__cover {
		display: block;
		height: 100%;
		width: 100%;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 3;
	}

	&__cover-bg {
		display: block;
		height: 648px;
		width: 600px;
		position: absolute;
		left: 18px;
		top: 62px;
		z-index: 1;
	}

	&--wait {
		height: 778px;
		width: 778px;
	}

	&--open {
		height: 688px;
		width: 652px;
	}

	&__z {
		display: flex;
		justify-content: center;
		position: absolute;
		left: 0;
		top: 350px;
		width: 100%;
		z-index: 3;

		span {
			display: inline-block;
			border: 2px solid #fff;
			color: #fff;
			border-radius: 14px;
			padding: 4px 15px;
		}
	}

	&__title {
		display: block;
		font-size: 46px;
		font-weight: 500;
		position: absolute;
		left: 0;
		top: 100px;
		width: 100%;
		text-align: center;
		color: #fff;
		letter-spacing: 1px;
	}

	&__price {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 200px;
		left: 0;
		width: 100%;
		z-index: 3;

		img {
			height: 60px;
			width: 32px;
		}

		span {
			font-size: 80px;
			color: #fff;
			font-weight: bold;

			&::after {
				content: '元';
				font-size: 28px;
				margin-left: 10px;
			}
		}
	}

	&__grab {
		position: absolute;
		left: calc(50% - 90px);
		bottom: 170px;
		z-index: 3;
		background-color: transparent;
		padding: 0;
		margin: 0;
		height: 180px;
		width: 180px;

		&::after {
			border: 0;
		}

		img {
			display: block;
			height: 180px;
			width: 180px;
			position: absolute;
			left: 0;
			top: 0;
		}

		&.is-animate {
			animation-delay: 1s;
			animation: heartBeat 1s infinite linear;
		}
	}

	@for $i from 1 through 11 {
		.d-#{$i} {
			opacity: 0;
		}

		.s-#{$i} {
			.d-#{$i} {
				opacity: 1;
				transform: scale(1);
			}
		}
	}

	@keyframes heartBeat {
		0% {
			transform: scale(1);
		}

		14% {
			transform: scale(1.1);
		}

		28% {
			transform: scale(1);
		}

		42% {
			transform: scale(1.1);
		}

		70% {
			transform: scale(1);
		}
	}

	&__date {
		display: flex;
		align-items: center;
		position: absolute;
		bottom: 30px;
		letter-spacing: 1px;
		z-index: 3;
	}

	&__next {
		background-color: transparent;
		position: absolute;
		bottom: 70px;
		height: 130px;
		width: 440px;
		z-index: 3;
		border: 0;

		img {
			height: 100%;
			width: 100%;
			position: absolute;
			left: 0;
			top: 0;
		}

		&::after {
			border: 0;
		}

		span {
			position: absolute;
			color: #be2a09;
			font-size: 34px;
			font-weight: 500;
			top: 22px;
			left: 0;
			width: 100%;
			display: block;
			text-align: center;
		}
	}

	&--open {
		.popup-rp__price {
			top: 240px;
			span {
				color: #f53f53;
			}
		}

		.popup-rp__date {
			color: #eee;
		}
	}

	&__light {
		position: absolute;
		left: 60px;
		top: -100px;
		overflow: hidden;
		height: 500px;
		width: 500px;
		transform: rotate(45deg);
		z-index: 2;

		img {
			position: absolute;
			top: 50px;
			left: 40px;
			display: block;
			height: 900px;
			width: 900px;
			animation: c 8s linear infinite;
		}

		@keyframes c {
			0% {
				transform: rotate(0deg);
			}
			100% {
				transform: rotate(180deg);
			}
		}
	}

	&__small {
		.d1 {
			height: 128px;
			width: 102px;
			position: absolute;
			left: 100px;
			bottom: 240px;
			animation: d1 0.3s linear infinite;
		}

		@keyframes d1 {
			0% {
				left: 100px;
				bottom: 240px;
				opacity: 1;
			}

			100% {
				left: -10px;
				bottom: 320px;
				opacity: 0.7;
			}
		}

		.d2 {
			height: 64px;
			width: 56px;
			position: absolute;
			left: 120px;
			bottom: 480px;
			animation: d2 0.3s linear infinite;
		}

		@keyframes d2 {
			0% {
				left: 120px;
				bottom: 480px;
				opacity: 1;
			}

			100% {
				left: 30px;
				bottom: 550px;
				opacity: 0.7;
			}
		}

		.d3 {
			height: 102px;
			width: 78px;
			position: absolute;
			right: 120px;
			bottom: 320px;
			animation: d3 0.3s linear infinite;
		}

		@keyframes d3 {
			0% {
				right: 120px;
				bottom: 320px;
				opacity: 1;
			}

			100% {
				right: 20px;
				bottom: 380px;
				opacity: 0.7;
			}
		}

		.d4 {
			height: 62px;
			width: 56px;
			position: absolute;
			right: 110px;
			top: 160px;
			animation: d4 0.3s linear infinite;
		}

		@keyframes d4 {
			0% {
				right: 110px;
				top: 160px;
				opacity: 1;
			}

			100% {
				right: 20px;
				top: 100px;
				opacity: 0.7;
			}
		}
	}
}
</style>
